<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-tabs v-model="thisStateActive" @tab-click="handleClick">
        <el-tab-pane label="教职工列表" name="/adminuser/list"></el-tab-pane>
        <el-tab-pane label="添加职工账号" name="/adminuser/add"></el-tab-pane>
        <router-view></router-view>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  watch:{
    activeName(newval){
      this.$store.commit('handleTab',newval)
    }
  },

  computed: {
    thisStateActive:{
      get(){
        return this.$store.state.activeName
      },
      set(value){
        if(value=='/adminuser/add') return
        this.$store.commit('handleTab',value)
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      this.$router.push(tab.name)
    },
  },
}
</script>

<style  scoped>
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.demo-table-expand .el-form-item >>> label {
  color: #99a9bf;
  width: 100px;
}
</style>
